<template>
  <div
    style="
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 32px;
      color: #fff;
    "
  >
    <span>{{ pjpwText }}</span>
  </div>
  <div ref="PwRef" class="con-c"></div>
</template>

<script setup>
import labTable from "@/mixins/table.json";
let { meta } = useRoute();
let Echarts = inject("$echarts");
let allData = inject("allData");
let PwRef = ref(null);
let pwDataList = ref([0, 0, 0, 0, 0, 0, 0]);
let id = meta.id;
let PwEchartsInstance = ref(null);
let pjpwText = computed(() => {
  let str = id == 1 ? "左" : "右";
  let value =
    id == 1
      ? allData.value?.left_main?.z110?.currentValue
      : allData.value?.right_main?.z210?.currentValue;
  value = value || 0;
  return str + "轴承平均温度:" + value + "℃";
});
let PwEchartsInstanceOption = reactive({
  xAxis: {
    type: "category",
    data: [
      "#0轴承温度",
      "#1轴承温度",
      "#2轴承温度",
      "#3轴承温度",
      "#4轴承温度",
      "#5轴承温度",
      "#6轴承温度",
    ],
    axisLabel:{
      fontSize:18
    }
  },
  yAxis: {
    type: "value",
    max:150,
    axisLabel:{
      fontSize:18
    }
  },
  textStyle: {
    fontSize: 20,
  },
  series: [
    {
      data: pwDataList.value,
      type: "bar",
      showBackground: true,
      backgroundStyle: {
        color: "rgba(180, 180, 180, 0.2)",
      },
      label: {
        show: true,
        position: 'top'
      },
    },
  ],
});

watch(
  () => allData.value,
  (newVal, oldVal) => {
    let tmpData = id == 1 ? newVal.left_main : newVal.right_main;
    let tmpJson = id == 1 ? labTable.left_main : labTable.right_main;
    tmpData = tmpData || {};
    let datakey = Object.keys(tmpData).filter((item) => {
      return tmpJson[item] ? tmpJson[item].name.slice(-4) == "轴承温度" : false;
    });
    let dataList = [];
    datakey.forEach((item, index) => {
      dataList.push(tmpData[item].currentValue);
    });
    pwDataList.value = dataList;
    PwEchartsInstanceOption.series[0].data = pwDataList.value;
    PwEchartsInstance.value.setOption(PwEchartsInstanceOption);
  },
  {
    deep: true,
  }
);
let handleDrawPwEcharts = () => {
  PwEchartsInstance.value = Echarts.init(PwRef.value);
  PwEchartsInstance.value.setOption(PwEchartsInstanceOption);
};
onMounted(() => {
  handleDrawPwEcharts();
});
</script>

<style scoped>
/* 706px */
.con-c {
  height: 83%;
}
</style>
